<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    {% include 'system/common/header.html' %}
   </head>
<body>
<div class="pear-container">
  <div class="layui-row">
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-body">
      <ul id="depselect" name="pid" class="dtree" data-id="0" data-value="0"></ul>
        </div>
        </div>
    </div>
    <div class="layui-col-md9">
      <div class="layui-card">
            <div class="layui-card-body">
            <div class="layui-form-item">
                <label class="layui-form-label">查找用户</label>
                <div class="layui-input-inline">
                    <div id="searchuser"></div>
                    <input type="hidden" name="depid" id="depid" value="{{ depid }}">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary addusertodep" lay-filter="dept-query">
                    <i class="layui-icon layui-icon-search"></i>
                    增加
                </button>
            </div>
<script type="text/html" id="dept-bar">
    {% if authorize("users:dep:edit") %}
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
                class="layui-icon layui-icon-diamond"></i>
        </button>
    {% endif %}
    {% if authorize("users:dept:remove") %}
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
                class="layui-icon layui-icon-delete"></i>
        </button>
    {% endif %}
</script>

<div class="layui-card">
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

            </div>
      </div>
    </div>
  </div>
</div>
{# 用户修改操作 #}
<script type="text/html" id="dept-bar">
    {% if authorize("users:admin:edit") %}
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="pear-icon pear-icon-edit"> 编辑</i>
        </button>
    {% endif %}
    {% if authorize("users:admin:remove") %}
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
                class="pear-icon pear-icon-ashbin"> 删除</i>
        </button>
    {% endif %}
</script>
{% include 'system/common/footer.html' %}
<script src="/users/static/xmselect/xm-select.js" type="text/javascript" charset="utf-8"></script>
<script>

    layui.use(['form', 'jquery', 'dtree', 'table'], function () {
        let form = layui.form
        let $ = layui.jquery
        let dtree = layui.dtree
        let table = layui.table

        // 初始化树
        var depsel = dtree.render({
          elem: "#depselect",
          url: "/users/dep/tree",
          method: 'get',
            // selectInputName: { nodeId: 'pid', context: 'title' },
            response: { treeId: 'id', parentId: 'pid', title: 'title' },
            dataFormat: 'list',
            ficon: ["1","-1"]
            // skin: 'layui'

        });

        // 绑定节点点击
        dtree.on("node('depselect')" ,function(obj){
            layer.msg(JSON.stringify(obj.param));
            let d = obj.param;
            let cols = [[
                {title: '数据ID', field: 'id', align: 'center'},
                {title: '用户ID', field: 'userid', align: 'center'},
                {title: '用户名', field: 'username', align: 'center'},
                {title: '姓名', field: 'truename', align: 'center'},
                {title: '领导', field: 'usleader', align: 'center'},
                {title: '操作', toolbar: '#dept-bar', align: 'center'}

            ]]
            table.render({
                elem: '#user-table',
                url: '/users/depmap/data?depid=' + d.nodeId,
                page: true,
                cols: cols,
                skin: 'line',
                defaultToolbar: [{
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh'},
                    'filter', 'print', 'export']
            });
            $('#depid').val(d.nodeId)
        });

        var search = xmSelect.render({
            el: '#searchuser',
            tips: '请选择用户（可多选）',
            empty: '没有数据呢',
            language: 'zn',
            filterable: true,
            prop: {
                name: 'showname',
            },
            data: []
        })
        $(function () {
            $.ajax({
                method: 'get',
                url: '/users/admin/ajax_get_items?item=userxmselect',
                success: function (res) {
                    var data = res;
                    //console.log(data)
                    search.update({
                        data: data,
                        autoRow: true
                    })
                }
            });
        })

        $('.addusertodep').click(function () {
            let val = search.getValue()
            let depid = $('#depid').val()
            console.log(val)
            $.ajax({
                method: 'post',
                url: '/users/depmap/add',
                data: {depid: depid, data: JSON.stringify(val)},
                success: function (res) {
                    layer.msg(res.msg, {icon: 1})
                }

            })
        })
    })
</script>
</body>
</html>